<template>
  <div class="moves_com_container">
    <div class="dialog" ref="moves">
      <div class="title" @mousedown.prevent="mouseDownHandle" @mouseup.prevent="mouseUphandle">这是标题</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MovesCom',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      moveDataelse: {}
    }
  },
  methods: {
    /**
     * @description: 拖拽效果
     * @param {*}
     * @return {*}
     */
    mouseDownHandle (event) {
      this.moveDataelse.x = event.pageX - this.$refs.moves.offsetLeft
      this.moveDataelse.y = event.pageY - this.$refs.moves.offsetTop
      window.onmousemove = this.mouseMoveHandleelse
    },
    mouseMoveHandleelse (event) {
      let moveLeft = event.pageX - this.moveDataelse.x + 'px'
      const moveright = event.pageX - this.moveDataelse.x
      let moveTop = event.pageY - this.moveDataelse.y + 'px'
      const moveBottom = event.pageY - this.moveDataelse.y
      const bodywith = window.screen.availWidth // 网页可见区域宽(body)
      const bodyheight = window.screen.availHeight // 网页可见区域高(body)
      // 判断是否出区域
      // 左侧
      if (moveLeft < 0 + 'px') {
        moveLeft = 0 + 'px'
      }
      // 右侧
      if (moveright + 300 > bodywith) {
        moveLeft = bodywith - 300 + 'px'
      }
      // 上侧
      if (moveTop < 0 + 'px') {
        moveTop = 0 + 'px'
      }
      // 下侧
      if (moveBottom + 505 > bodyheight) {
        moveTop = bodyheight - 505 + 'px'
      }
      this.$refs.moves.style.left = moveLeft
      this.$refs.moves.style.top = moveTop
    },
    mouseUphandle (event) {
      window.onmousemove = null
    },
    handleClose () {
      this.$parent.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.dialog {
  width: 300px;
  height: 400px;
  background-color: pink;
  position: absolute;

  .title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    cursor: move;
    background-color: skyblue;
  }
}
</style>
